<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锁定列</title>
<%@ include file="/skin.jsp" %>
<!--框架必需start-->
<script type="text/javascript" src="<c:out value='${sessionScope.libs}'/>/js/jquery.js"></script>
<script type="text/javascript" src="<c:out value='${sessionScope.libs}'/>/js/language/cn.js"></script>
<script type="text/javascript" src="<c:out value='${sessionScope.libs}'/>/js/framework.js"></script>
<link href="<c:out value='${sessionScope.libs}'/>/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="<c:out value='${sessionScope.contextPath}'/>/"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="<c:out value='${sessionScope.libs}'/>/js/table/spGrid.js" type="text/javascript"></script>
<!--数据表格end-->
<!--记忆表格选中处理start-->
<script type="text/javascript" src="<c:out value='${sessionScope.libs}'/>/js/table/check-all-memory.js"></script>
<!--记忆表格选中处理end-->
</head>
<body>


	
		<input type="button" value="获取未选中项" onclick="getCheckedHandler()" />
		<input  type="button" value="清空未选中项" onclick="removeAll();"/>
	<div class="padding_right5">
		<div id="maingrid"></div>
    </div>
	<script type="text/javascript">
	 function checkAllRowHandler(checked)
	    {
	    	if(g.allCountChecked==true){
	    		for (var rowid in this.records)
	    		{
	    			if(checked)
	    				removeUnCheckedArray(this.records[rowid]);
	    			else
	    				addUnCheckedArray(this.records[rowid]);
	    		}
	    	}
	    }
	    function checkRowHandler(checked, data)
	    {
	        if(g.allCountChecked==true){
	        	if (checked) removeUnCheckedArray(data);
	            else addUnCheckedArray(data);
	        }
	    }
	 var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":10,"rows":[
	                {"orgId":"1","orgName":"部门1","userEducation":"本科","userEmployTime":"2012-10-21","userId":"1","userLoginName":"her0","userName":"用户0","userPassword":"123456","userSex":"男"},
	                {"orgId":"1","orgName":"部门1","userEducation":"本科","userEmployTime":"2012-10-21","userId":"2","userLoginName":"her1","userName":"用户1","userPassword":"123456","userSex":"男"},
	                {"orgId":"1","orgName":"部门1","userEducation":"本科","userEmployTime":"2012-10-21","userId":"3","userLoginName":"her2","userName":"用户2","userPassword":"123456","userSex":"男"},
	                {"orgId":"1","orgName":"部门1","userEducation":"本科","userEmployTime":"2012-10-21","userId":"4","userLoginName":"her3","userName":"用户3","userPassword":"123456","userSex":"男"},
	                {"orgId":"2","orgName":"部门2","userEducation":"本科","userEmployTime":"2012-10-21","userId":"5","userLoginName":"her4","userName":"用户4","userPassword":"123456","userSex":"男"},
	                {"orgId":"2","orgName":"部门2","userEducation":"本科","userEmployTime":"2012-10-21","userId":"6","userLoginName":"her5","userName":"用户5","userPassword":"123456","userSex":"男"},
	                {"orgId":"2","orgName":"部门2","userEducation":"本科","userEmployTime":"2012-10-21","userId":"7","userLoginName":"her6","userName":"用户6","userPassword":"123456","userSex":"男"},
	                {"orgId":"2","orgName":"部门2","userEducation":"本科","userEmployTime":"2012-10-21","userId":"8","userLoginName":"her7","userName":"用户7","userPassword":"123456","userSex":"男"},
	                {"orgId":"3","orgName":"部门3","userEducation":"本科","userEmployTime":"2012-10-21","userId":"9","userLoginName":"her8","userName":"用户8","userPassword":"123456","userSex":"男"},
	                {"orgId":"3","orgName":"部门3","userEducation":"本科","userEmployTime":"2012-10-21","userId":"10","userLoginName":"her9","userName":"用户9","userPassword":"123456","userSex":"男"}
	                ]}

       //数据表格使用
        var g;

		function initComplete(){
			 g = $("#maingrid").spGrid({
                columns: [ 
	                 { display: '姓名', name: 'userName',     align: 'left', width: "20%"},
				    { display: '所属部门', name: 'orgName', 	 align: 'left', width: "20%"},
				    { display: '性别', name: 'userSex', align: 'left', width: "20%"},
				    { display: '入职时间', name: 'userEmployTime', 	 align: 'left',  width:"20%"} ,
				    { display: '学历', name: 'userEducation', 	 align: 'left',  width:"20%"}
                ], data: testData,keyId:"userId", pageSize: 5,allowUnSelectRow:true,showAllCountChecked:true, rownumbers:true, checkbox:true,percentWidthMode:true,
                 width:"100%",onCheckRow: checkRowHandler, onCheckAllRow: checkAllRowHandler
            });
		}

        function getCheckedHandler()
        {
            top.Dialog.alert("未选中文本："+g.getUncheckedArray().join(','));
        }
        function removeAll(){
			g.clearUncheckedArray();      	
        }
    </script>	
    	<fieldset> 
			<legend>1、使用说明</legend>				
			   1.将表格的checkbox属性设置为true<br/>
			   2.将表格的showAllCountChecked属性设置为true<br/>
			   3.需要设置keyId属性，以确保该值在数据集合中的唯一性，比如在示例工程中为userId<br/>
			   4.需要在页面中添加监听单击onCheckRow事件的响应函数checkRowHandler,以及全选事件onCheckAllRow事件的响应函数checkAllRowHandler<br/>
			   5.如果用户需要在单击、全选事件中添加其他自定义的操作代码，请额外添加示例中的代码。
			    function checkRowHandler(checked, data)<br/>
   				 {<br/>
   				 
   				 	//...用户自定义的代码段<br/>
   				 
   				 
   				 	//在全记录选择下，需要添加的代码<br/>
        			if(g.allCountChecked==true){<br/>
        				if (checked) removeUnCheckedArray(data);<br/>
            			else addUnCheckedArray(data);<br/>
        			}<br/>
    			}<br/>
    			function checkAllRowHandler(checked)<br/>
    			{<br/>
    				//...用户自定义的代码段<br/>
    				
    				
    				//在全记录选择下，需要添加的代码<br/>
    				if(g.allCountChecked==true){<br/>
    					for (var rowid in this.records)<br/>
    					{<br/>
    						if(checked)<br/>
    							removeUnCheckedArray(this.records[rowid]);<br/>
    						else<br/>
    							addUnCheckedArray(this.records[rowid]);<br/>
    					}<br/>
    				}<br/>
   				 }<br/>
   			   6.因为表格是支持分页获取的，在分页加载的时候无法获取所有的数据，为了保持数据的一致性，<br/>
   			    用户编写添加、修改、删除功能时，需要调用clearUncheckedArray()  将“全记录选择”功能失效。<br/>
   			   7.在全记录选择模式下，获取未选中项的方法是getUncheckedArray()。<br/>
   				
	   </fieldset> 
</body>
</html>